<script setup>
import FormDesigner from "@/form-designer/FormDesigner.vue";
import { reactive, ref } from "vue";
const data = ref({
  props: {
    labelPosition: "right",
    labelWidth: 100,
    size: "default",
    customClass: "",
    cols: 24,
  },
  controls: [],
});

const customComponents = [
  {
    groupName: "自定义组件",
    components: {},
  },
];

//删除表单元素
const deleteItem = (data) => {
  console.log("删除表单元素：", data);
};
//复制表单元素
const copyItem = (data) => {
  console.log("复制表单元素：", data);
};
//自定义表单项按钮点击事件
function itemCustomButtonClick(element) {
  console.log(element);
}

//发布表单
function releaseForm() {
  console.log(data);
}
</script>

<template>
  <div class="h-full">
    <FormDesigner
      :controlGroups="controlGroups"
      :customComponents="customComponents"
      :formData="data"
      @deleteItem="deleteItem"
      @copyItem="copyItem"
    >
      <template #button>
        <el-button text type="primary" @click="releaseForm">
          <!-- <el-icon>
            <NameIcon name="upload" />
          </el-icon> -->
          <span>发布</span>
        </el-button>
      </template>
      <template #action="{ data }">
        <el-icon @click.stop="itemCustomButtonClick(data)">
          <!-- <NameIcon name="editor" style="color: #fff"></NameIcon> -->
        </el-icon>
      </template>
    </FormDesigner>
  </div>
</template>

<style>
#app {
  height: 100vh;
}
</style>
